<template>
  <div class="wrapper-seas"  @click="treeBlurHide">
    <el-form label-position="top" :inline="true" v-model="filter" class="demo-form-inline">
      <el-row>
        <el-col :span="4">
          <el-form-item label="客户类别: ">
            <el-input v-model="category.name" icon="caret-bottom" placeholder="选择客户类别"  size="small"></el-input>
            <div @click.stop="category.showTree=!category.showTree"
                 style="position: absolute;top:3px;left:0;z-index: 10;width: 100%;height: 30px;">
              <div v-show="category.showTree" class="department-tree-select inline-tree" >
                <el-tree :data="category.data"
                         style="width: 240px"
                         show-checkbox
                         default-expand-all
                         node-key="id"
                         ref="searchTree"
                         @check-change="handleCheckChange"
                         :props="defaultProps">
                </el-tree>
              </div>
            </div>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="客户名称:">
            <el-input placeholder="客户名称" v-model="filter.CustomerName" size="small"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="手机号码:">
            <el-input  placeholder="手机号码" v-model="filter.Tel" size="small"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="客户来源:">
            <el-input  placeholder="客户来源" v-model="filter.CustomerFrom" size="small"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="联系人:">
            <el-input  placeholder="联系人" v-model="filter.ContactName" size="small"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="跟进数:">
            <el-input  placeholder="次以上" v-model="filter.FollowCount" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="4">
          <el-form-item label="是否重要客户:">
            <el-select  v-model="filter.importantFlag" size="small">
              <el-option label="全部" value=""></el-option>
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="KP:">
            <el-select  v-model="filter.KpFlag" size="small">
              <el-option label="全部" value=""></el-option>
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="创建时间:">
            <el-date-picker
                    size="small"
                    v-model="GmtCreate"
                    type="datetimerange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions1">
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="最新跟进时间:">
            <el-date-picker
                    size="small"
                    v-model="LastFollowTime"
                    type="datetimerange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="下次联系时间:">
            <el-date-picker
                    size="small"
                    v-model="PlanTime"
                    type="datetimerange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24" class="action_col">
          <el-form-item class="action_button_group_open">
            <el-button size="small" type="primary" @click="empty"><i class="fa fa-trash-o fa-lg"></i> 清空筛选条件</el-button>
            <el-button size="small" type="primary" @click="getCustomerSeas" icon="el-icon-search">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row>
      <el-button size="small" @click="receiveBox"><i class="fa fa-share"></i> 领取</el-button>
      <el-button size="small" @click="transDialog"><i class="fa fa-share-alt"></i> 分配</el-button>
      <el-button size="small" @click="refresh"><i class="fa fa-refresh"></i> 刷新</el-button>
      <a class="exportTag" href="javascript:void(0)" id="exportTag" @click="exportTable"><el-button size="small" icon="el-icon-zoom-in">导出</el-button></a>
    </el-row>

    <el-row class="customer_row">
      <el-table border :data="customerSeasList" v-model="customerSeasList" style="width: 100%" @selection-change="handleSelectionChange" :row-class-name="tableRowClassNameSea">
        <el-table-column type="selection"  width="50"></el-table-column>

        <el-table-column prop="customerName" label="客户名称" align="center" min-width='200' className="asds">
          <template scope="scope">
            <div class="customer_col">
              <span style="word-break: normal">
                <!--<nuxt-link :to="{ path: '/customer/detail', query: { id: scope.row.id ,customerContactId: scope.row.customerContactId ,from: 'seas' ,customerName: scope.row.customerName}}" class="linked">
                {{ scope.row.customerName}}
                </nuxt-link>-->
                <span @click="handleToDetail(scope.row)" :class="{ active: scope.row.visited == true }">
                      {{ scope.row.customerName}}
                </span>
              </span>
            </div>
          </template>
        </el-table-column>

        <el-table-column  prop="customerTypeName" :render-header="renderHeader" label="客户类别" align="center" min-width='117' className="asds"></el-table-column>
        <el-table-column prop="contactName" label="联系人名称" align="center" min-width='110' className="asds"></el-table-column>
        <el-table-column prop="tel" label="手机号码" align="center" min-width='140' className="asds"></el-table-column>
        <el-table-column prop="customerFrom" label="客户来源" align="center" min-width='95' className="asds"></el-table-column>
        <el-table-column label="创建时间"  :render-header="renderHeader" prop="gmtCreate" align="center" min-width="179" className="asds"></el-table-column>
        
        <el-table-column label="最新跟进时间" :render-header="renderHeader" prop="lastFollowTime" align="center" min-width="179" className="asds"></el-table-column>
        <el-table-column label="下次联系时间" :render-header="renderHeader" prop="planTime" align="center" min-width="179" className="asds"></el-table-column>

        <el-table-column label="操作" fixed="right" min-width="120" align="center" className="asds">
          <template scope="scope">
            <el-button type="danger" size="mini" @click="deleteBox(scope.row)" icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="paging">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="pagingData.pageNum"
                     :page-sizes="pagingData.pageSizes"
                     :page-size="filter.pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="pagingData.total">
      </el-pagination>
    </el-row>

    <!--导出数据表格-->
    <el-table id="table01" border :data="exportData" v-model="exportData" style="width: 1px;height: 1px;opacity: 0;position: absolute;z-index: 10;left: -1000px;" >
      <el-table-column type="selection"  width="50"></el-table-column>
      <el-table-column prop="customerName" label="客户名称" align="center" min-width='200' className="asds">
        <template scope="scope">
          <div class="customer_col">
              <span style="word-break: normal">
                <span @click="handleToDetail(scope.row)" :class="{ active: scope.row.visited == true }">
                      {{ scope.row.customerName}}
                </span>
              </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column  prop="customerTypeName" :render-header="renderHeader" label="客户类别" align="center" min-width='117' className="asds"></el-table-column>
      <el-table-column prop="contactName" label="联系人名称" align="center" min-width='110' className="asds"></el-table-column>
      <el-table-column prop="tel" label="手机号码" align="center" min-width='140' className="asds"></el-table-column>
      <el-table-column prop="customerFrom" label="客户来源" align="center" min-width='95' className="asds"></el-table-column>
      <el-table-column label="创建时间"  :render-header="renderHeader" prop="gmtCreate" align="center" min-width="179" className="asds"></el-table-column>
      <el-table-column label="最新跟进时间" :render-header="renderHeader" prop="lastFollowTime" align="center" min-width="179" className="asds"></el-table-column>
      <el-table-column label="下次联系时间" :render-header="renderHeader" prop="planTime" align="center" min-width="179" className="asds"></el-table-column>
    </el-table>

    <!--分配弹框-->
    <el-dialog title="分配" :visible.sync="dialogTableVisible" @close="closeDialog" >
      <el-row style="margin-bottom: 20px" >
          <el-col :span="12">
              <el-select v-model="userFilter.deptId" placeholder="请选择部门" size="small"  @change="selectDept">
                  <el-option 
                      v-for="(item,index) in deptList" 
                      :value="item.deptId" 
                      :label="item.name" 
                      :key="index">
                  </el-option>
              </el-select>
          </el-col>
      </el-row>

      <el-table class="seller-table" :data="userList" highlight-current-row @current-change="highlightDialog" @row-click="selectUser" border style="max-height:541px">
        <el-table-column type="index" width="55" align="center"></el-table-column>
        <el-table-column property="account" label="用户名" width="" align="center"></el-table-column>
        <el-table-column property="name" label="用户姓名" width="" align="center"></el-table-column>
        <el-table-column property="departmentName" label="部门" align="center"></el-table-column>
      </el-table>
      <el-row class="paging">
        <el-pagination
                @size-change="userHandleSizeChange"
                @current-change="userHandleCurrentChange"
                :current-page="pagingUserData.pageNum"
                :page-sizes="pagingUserData.pageSizes"
                :page-size="userFilter.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagingUserData.total">
        </el-pagination>
      </el-row>

      <el-row style="margin-top: 20px" >
        <el-col :span="12">

          <el-button type="primary" class="top_save" @click="transSubmit" size="small"><i class="fa fa-save"></i> 保存</el-button>
        </el-col>
        <el-col :span="12">
          <el-button type="danger" class="top_close" @click="dialogTableVisible = false"  size="small"><i class="fa fa-sign-out"></i> 关闭</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  import Vue from 'vue'
  import {
    Row, Col, Form, FormItem, Input, Select, Option, DatePicker, ButtonGroup,Tree,
    Button, Table, TableColumn, Checkbox, CheckboxGroup, Message, MessageBox, Pagination, Dialog
  } from 'element-ui'
  import {mapGetters, mapActions, mapMutations} from 'vuex';
  import {getDate, getUserFromCookie, getArraySub , getLevelName, validTel, setToken, getCookie,uniqueArr} from '../../utils/auth'
  import Cookie from 'js-cookie'
  import axios from '~plugins/axios';

  Vue.use(Row);
  Vue.use(Col);
  Vue.use(Form);
  Vue.use(FormItem);
  Vue.use(Input);
  Vue.use(Select);
  Vue.use(Option);
  Vue.use(DatePicker);
  Vue.use(ButtonGroup);
  Vue.use(Button);
  Vue.use(Table);
  Vue.use(TableColumn);
  Vue.use(Checkbox);
  Vue.use(CheckboxGroup);
  Vue.use(Pagination);
  Vue.use(Dialog);
  Vue.use(Tree);

  Vue.prototype.$message = Message;

  export default {
    head(){
        return {
            title: "公海客户"
        }
    },
    data () {
      return {
          tabName: "公海客户",
        formLabelWidth: '100px',
        departmentTree: [],
        departmentTreeProps: {
            label: 'name',
            children: 'zones'
        },
        positionForm: {
            department: '',
            showTree: false,
            departmentName: '龙席集团'
        },
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
        pickerOptions1: {
            disabledDate(time) {
                return time.getTime() > Date.now()
            }
        },
        customerSeasList: [],                   // 公海客户列表
        selectedCustomerSeas: [],               // 被选中公海客户数组
        filter: {
          CustomerName: '',   //客户名称
          ContactName: '',   //联系人
          Tel: '',    //手机号
          CustomerFrom: '',    //客户来源
          CustomerIndustry: '',  //所属行业
          FollowCount: '',   //跟进次数
          KpFlag: '',   //KP标识
          importantFlag: '',

          pageSize: 50, // 每页条数
          pageNum: 1,
          GmtCreateBegin: '', //创建时间开始
          GmtCreateEnd: '',  //创建时间结束
          PlanTimeBegin: '',   //下次联系时间开始
          PlanTimeEnd: '',  //下次联系时间结束
          LastFollowBegin: '', //最新跟进时间开始
          LastFollowEnd: '',   //最新跟进时间结束
          CustomerLevels: '',
          publicFlag: 1,
          sortField: 'last_follow_time',
          sortOrder: 'desc',
        },
        GmtCreate: [],    //创建时间
        PlanTime: [],   //下次联系时间
        LastFollowTime: [],   //最新跟进时间
        pagingData: {
          pageSizes: [10, 20, 50],	// 每页可选条数列表,
          total: 0,
          pageNum: 1
        },
        checked: true,
        unchecked: false,
        deptList: [],               // 部门列表
        dialogTableVisible: false,
        userList: [],
        userFilter: {
          pageNum: 1,
          pageSize: 10,
          deptId: '',
          departmentRoleId: ''
        },
        pagingUserData: {
          pageSizes: [10, 20, 30, 40, 50],	// 每页可选条数列表,
          total: 0,
          pageNum: 1
        },
        dialogCurrentRow: null,         // dialog高亮的行
        transSelectedCustomerId: null,  // 选择需要分配的客户id
        transSelectedUserId: null,      // dialog单击选择的用户id
        departmentRoleId: '',           // 当前登录用户的部门角色id
        multipleSelection: [],           // checkbox选中客户列表数据
        category: {
          name: '',
          showTree: false,
          data:[{
            id: 0,
            label: '全部',
            children: [{    //预留children
              id: 1,
              label: '暂无数据'
            }]
          }]
        },
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        userData:[],
        user:{
            deptId: '',
            departmentName: ''
        },
        exportData: []
      }
    },
    computed : {
            ...mapGetters([
                
                "myCustomerXYSEA",
                
            ])
        },
    methods: {
      //搜索条件加入cookie
      setFilterCookie(){
          let data = JSON.stringify(this.filter);
          let category = JSON.stringify(this.category.name);
          this.$store.commit('SEAS_CUSTOMER_FILTER',{data});
          this.$store.commit('SEAS_CUSTOMER_CATEGORY',{data:category});
         	// setToken('seasCustomerCategory',category);
          // setToken('seasCustomerFilter',data);
      },
      
      renderHeader(h, { column, $index }){
                switch ($index) { 
                	case 2:
                        return (
                            <div style="color: #1488FF;cursor: pointer;" on-click={ () => this.sortData('customer_level') }>客户类别&nbsp;<i class="fa fa-sort"></i></div>
                            );
                        break;
                    case 6:
                        return (
                            <div style="color: #1488FF;cursor: pointer;" on-click={ () => this.sortData('gmt_create') }>创建时间&nbsp;<i class="fa fa-sort"></i></div>
                            );
                        break;
                    case 7:
                        return (
                            <div style="color: #1488FF;cursor: pointer;" on-click={ () => this.sortData('last_follow_time') }>最新跟进时间&nbsp;<i class="fa fa-sort"></i></div>
                            );
                        break;
                    case 8:
                        return (
                            <div style="color: #1488FF;cursor: pointer;" on-click={ () => this.sortData('plan_time') }>下次联系时间&nbsp;<i class="fa fa-sort"></i></div>
                            );

                        break;
                    
                }
            },
            sortData(type) {
                this.filter.sortField = type;
                this.filter.sortOrder = this.sortOrder == true ? 'asc':'desc';
                this.sortOrder = !this.sortOrder;
                this.getCustomerSeas();
            },

      // 获取客户列表
      getCustomerSeas () {
        if(this.filter.Tel && validTel(this.filter.Tel) == false) {
          Message.warning({
            message: '手机号码格式不正确'
          });
          return;
        }

        if (this.GmtCreate&&this.GmtCreate[0]) {
            this.filter.GmtCreateBegin = this.GmtCreate[0]?getDate(this.GmtCreate[0],true):'';
            this.filter.GmtCreateEnd =  this.GmtCreate[1]?getDate(this.GmtCreate[1],true):'';
        }else{
            this.filter.GmtCreateBegin =''
            this.filter.GmtCreateEnd = ''
        }

        if (this.PlanTime&&this.PlanTime[0]) {
            this.filter.PlanTimeBegin = this.PlanTime[0]?getDate(this.PlanTime[0],true):'';
            this.filter.PlanTimeEnd = this.PlanTime[1]?getDate(this.PlanTime[1],true):'';
        }else{
            this.filter.PlanTimeBegin =''
            this.filter.PlanTimeEnd = ''
        }

        if (this.LastFollowTime&&this.LastFollowTime[0]) {
            this.filter.LastFollowBegin = this.LastFollowTime[0]?getDate(this.LastFollowTime[0],true):'';
            this.filter.LastFollowEnd = this.LastFollowTime[1]?getDate(this.LastFollowTime[1],true):'';
        }else{
            this.filter.LastFollowBegin = '';
            this.filter.LastFollowEnd = ''
        }

        this.setFilterCookie();

        this.$store.dispatch('customerList', this.filter)
          .then((response) => {
            if(!response){return}
            let result = response.data;
            if (result.code == 0  && result.data) {
              this.customerSeasList = result.data.list;
              for(var i = 0; i < this.customerSeasList.length; i++) {
                  if(this.customerSeasList[i].customerTypeName) {
                      this.customerSeasList[i].customerTypeName = this.customerSeasList[i].customerTypeName.slice(0,2)
                  }
                  this.customerSeasList[i].visited = false;
              }
              for(var j=0;j<this.visitedUrl.length;j++){
                for(var i = 0; i < this.customerSeasList.length; i++) {
                    if(this.customerSeasList[i].id == this.visitedUrl[j]){
                        this.customerSeasList[i].visited = true;
                    }
                }
            }
              this.pagingData.total = result.data.total;
              this.pagingData.pageNum = result.data.pageNum > 0 ? result.data.pageNum : 1;
            }else {
                this.customerSeasList = [];
                this.pagingData.total = 0;
                this.pagingData.pageNum = 1
            }
          })
      },
      loadNode(node, resolve) {
          axios.get(process.env.baseUrl + '/department/list', {params:{ parentId:node.data.id||0}})
                  .then((ret)=>{
              return resolve(ret.data.data);
          })
      },
      handleSearchCheckChange(data,checked) {
          if(checked) {
              this.filter.deptId = data.id;
              this.positionForm.department = data.id;
              this.userFilter.deptId = data.id;
              this.positionForm.departmentName = data.name;
              this.positionForm.showTree = !this.positionForm.showTree;
              this.$refs.searchTree.setCheckedKeys([]);
              this.$refs.searchTree.setChecked(data,true)
          }
      },
      // 获取用户列表
      getUserList () {
        let data = this.userFilter;
        this.$store.dispatch('getUserOwnerData', data)
          .then((response) => {
            if(!response){return}
            let result = response.data;
            if (result.code === 0) {
              this.userList = result.data.list;
              this.pagingUserData.total = result.data.total;
              this.pagingUserData.pageNum = result.data.pageNum > 0 ? result.data.pageNum : 1;
            } else {
              Message.error(result.message);
            }
          })
      },

      empty () {
      	
        this.filter = {
          CustomerName: '',   //客户名称
          ContactName: '',   //联系人
          Tel: '',    //手机号
          CustomerFrom: '',    //客户来源
          CustomerIndustry: '',  //所属行业
          FollowCount: '',   //跟进次数
          KpFlag: '',   //KP标识
          importantFlag: '',
          pageSize: 50, // 每页条数
          pageNum: 1,
          GmtCreateBegin: '', //创建时间开始
          GmtCreateEnd: '',  //创建时间结束
          PlanTimeBegin: '',   //下次联系时间开始
          PlanTimeEnd: '',  //下次联系时间结束
          LastFollowBegin: '', //最新跟进时间开始
          LastFollowEnd: '',   //最新跟进时间结束
          CustomerLevels: '',
          sortField: 'last_follow_time',
          sortOrder: 'desc',
          publicFlag: 1
        };
        this.GmtCreate = [];    //创建时间
        this.PlanTime = [];   //下次联系时间
        this.LastFollowTime = [];   //最新跟进时间
        this.category.name='';
        this.$refs.searchTree.setCheckedKeys([]);

        this.setFilterCookie();
      },

      // 领取客户弹框
      receiveBox () {
        if (this.multipleSelection == '') {
          this.$message.error('请先选择客户');return;
        }
        MessageBox.confirm('确认领取此公海客户吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.receive();
        })
      },
      refresh() {
          window.location.reload();
      },
        exportTable() { //将表格内容导出到excel中
            if (this.multipleSelection == '' || this.multipleSelection.length <= 0) {
                this.$message.error('请先选择客户');
                return;
            }else{
                let html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementById('table01').outerHTML + "</body></html>";
                // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
                let blob = new Blob([html], {
                    type: "application/vnd.ms-excel"
                });
                let a = document.getElementById("exportTag");
                // 利用URL.createObjectURL()方法为a元素生成blob URL
                a.href = URL.createObjectURL(blob);
                // 设置文件名，目前只有Chrome和FireFox支持此属性
                a.download = "公海客户列表.xls";
            }

        },
      getUserData() {
        this.$store.dispatch('getUserPersonalData')
          .then((response) => {
            if(!response){return}
            var result = response.data;
            if (result.code === 0) {
                if(result.data) {
                    this.userData = result.data;
                    this.user.deptId = result.data.deptId;
                    this.user.departmentName = result.data.departmentName;
                }
            }
            this.getCustomerSeas();
        })
      },

      // 领取客户
      receive () {
        let ids = this.multipleSelection.join(',');
        let userId = this.userData.id;
        
        this.$store.dispatch('receiveCustomer', {ids: ids, userid: userId})
          .then((response) => {
            if(!response){return}
            let result = response.data;
            if (result.code === 0) {
              Message.success('领取客户成功');
              this.getCustomerSeas();
            } else {
              Message.error(result.message);
            }
          })
          .catch((error) => {
            Message.error('领取客户失败');
          })
      },

      // 删除用户弹框
      deleteBox (row) {
        MessageBox.confirm('确认删除客户：' + row.customerName + '吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteCustomer(row.id);
        })
      },

      // 删除用户
      deleteCustomer (id) {
        this.$store.dispatch('deleteResult', {ids: id})
          .then((response) => {
            if(!response){return}
            var result = response.data;
            if (result.successed && result.successed == true) {
              this.getCustomerSeas();
              Message.success({
                message: '删除成功'
              });
            }
          })
          .catch((error) => {
            Message.error({
              message: '删除失败'
            })
          });
      },
			tableRowClassNameSea(row, index) {
            if (row.importantFlag == '1') {
                return 'info-row';
            }
            return '';
        },

      // 分配dialog
      transDialog () {
        if (this.multipleSelection == '') {
          this.$message.error('请先选择客户');return;
        }
        this.transSelectedCustomerId = this.multipleSelection.join(',');
        this.getUserList();
        this.dialogTableVisible = true;
        this.$store.dispatch('getOwnerDeptment')
          .then((response) => {
            if(!response){return}
            var result = response.data;
            if (result.code === 0) {
                this.deptList = result.data;
            }
        })
      },
      // 关闭dialog回调
      closeDialog () {
        this.dialogCurrentRow = null;         // 清除高亮的行
        this.transSelectedCustomerId = null;  // 清除选择的客户
        this.transSelectedUserId = null;      // 清除选择的用户
        this.userFilter.deptId = '';    // 清除select的部门选择
        this.dialogTableVisible = false;
      },
      // dialog 用户列表单击选择高亮
      highlightDialog (val) {
        this.dialogCurrentRow = val;
      },
      // 选择分配到的用户
      selectUser (row, event, column) {
        this.transSelectedUserId = row.id;
      },
      // 保存分配
      transSubmit () {
        if (this.transSelectedCustomerId == '' || this.transSelectedCustomerId == null) {
          this.$message.error('请先选择客户');return;
        }
        if (this.transSelectedUserId == '' || this.transSelectedUserId == null) {
          this.$message.error('请先选择用户');return;
        }
        this.$store.dispatch('transCustomer', {userid: this.transSelectedUserId, ids: this.transSelectedCustomerId})
          .then((response) => {
            if(!response){return}
            let result = response.data;
            if (result.code === 0) {
              Message.success('分配客户成功');
              this.dialogTableVisible = false;  // 成功后关闭dialog
              this.transSelectedCustomerId = null;
              this.getCustomerSeas();
            } else {
              Message.error(result.message);
            }
          })
      },

      handleSizeChange(val) {
        this.filter.pageSize = val;
        this.filter.pageNum = 1;
        this.getCustomerSeas(this.filter);
      },
      handleCurrentChange(val) {
        this.filter.pageNum = val;
       
        this.getCustomerSeas(this.filter);
      },
      userHandleSizeChange(val) {
        this.userFilter.pageNum = 1;
        this.userFilter.pageSize = val;
        this.getUserList();
      },
      userHandleCurrentChange(val) {
        this.userFilter.pageNum = val;
        this.pagingUserData.pageNum = val;
        this.getUserList();
      },
      // 公海客户列表多选
      handleSelectionChange(val) {
        let ids = [];
        for (let i = 0; i < val.length; i++) {
          ids.push(val[i].id);
        }
        this.multipleSelection = ids;
        this.exportData = val;
      },
      //客户分类选中回调
      handleCheckChange(data,checked) {
        this.category.name ='';
        var checkedId = this.$refs.searchTree.getCheckedKeys(data,true);
        var checkedName = [];
        if(checkedId.length == this.category.data[0].children.length) {
          this.category.name = '全部'
        }else {
          for(var i=0;i<checkedId.length;i++){
            checkedName.push(getLevelName(checkedId[i]));
          }
          this.category.name = checkedName.join(' / ');
        }
        this.filter.CustomerLevels = checkedId.join(',');
      },
      
      handleToDetail(row) {

							let arr = this.visitedUrl;
                arr.push(row.id);
                arr = uniqueArr(arr);
                if(row.customerContactId == null){
                	this.$router.push({path: '/customer/detailsea?id=' + row.id + '&customerContactId' + row.customerContactId + '&from=seas&customerName=' + row.customerName})
                }else{
                	 this.$router.push({path: '/customer/detailsea?id=' + row.id + '&customerContactId=' + row.customerContactId + '&from=seas&customerName=' + row.customerName})
                }
                this.$store.commit('VISITEDURL',{visitedUrl:arr});
               
            },
      
      //隐藏客户分类
      treeBlurHide(){
        this.category.showTree = false;

        let data = document.getElementsByClassName('default')[0].scrollTop;
        this.$store.commit('MY_CUSTOMER_XY_SEA',{data});
      },
      
      selectDept(val) {
          this.userFilter.pageNum = 1;
          this.getUserList();
      }
    },
    computed: {
      ...mapGetters({
        'customerListCurrentPage': 'getCustomerListCurrentPage',
        'customerListTotal': 'getCustomerListTotal',
        'deleteResult': 'getDeleteResult',
          'pageTabsList': 'getPageTabsList',
          'visitedUrl': 'getVisitedUrl'
      }),
    },
    created () {
      this.category.name ='';
        if(process.BROWSER_BUILD){
            //pageTab
            if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                let arr = this.pageTabsList;  
                arr[arr.length-1].name = this.tabName;
                this.$store.commit('PAGETABSLIST',{data:arr})
            }
        }

    },
    mounted(){
      this.getUserData();
      // 获取客户类别等级列表
      this.$store.dispatch('getSalesCategoryList')
        .then((response) => {
          if(!response){return}
        if(response.data && response.data.data ){
          var data = response.data.data;
          this.category.data[0].children=[];
          for(var i=0;i< data.length;i++){
            this.category.data[0].children.push({id: data[i].key , label : data[i].value});
          }
        }
      })

      //从cookie里取出filter数据
      // let parentUrl = getCookie('parentUrl');
      // if(parentUrl == 'customerDetail'){}

        let filter = this.$store.getters.seasCustomerFilter;
        let category = this.$store.getters.seasCustomerCategory;
        if(filter) this.filter = JSON.parse(filter);
        if(category) this.category.name = JSON.parse(category);
        
        if(this.filter.GmtCreateBegin.length){
          this.GmtCreate = [new Date(this.filter.GmtCreateBegin),new Date(this.filter.GmtCreateEnd)]
        }

        if(this.filter.PlanTimeBegin.length){
          this.PlanTime = [new Date(this.filter.PlanTimeBegin),new Date(this.filter.PlanTimeEnd)]
        }

        if(this.filter.LastFollowEnd.length){
          this.LastFollowTime = [new Date(this.filter.LastFollowBegin),new Date(this.filter.LastFollowEnd)]
        }
        if(this.$route.query.customerName){
            this.filter.CustomerName = this.$route.query.customerName;
        }

        let scro = this.$store.getters.myCustomerXYSEA;

	      var deSEA = document.getElementsByClassName("default")[0];

	      setTimeout(function(){
	          deSEA.scrollTop = scro;
	          
	      },900)
				
//      this.getCustomerSeas();

    } 
  }

</script>

<style  lang="scss">
.wrapper-seas{
  margin-top:20px;

  /*.linked:visited{
        color: #646464;
      }*/
	.el-table .asds>.cell{
    		padding: 0px;
    	}
  .el-form {
    .el-form-item {width: 70%}
    .el-input, .el-select, .el-cascader, .el-date-picker {width: 100%}
  }

  .action_col {
    position: relative
  }

  .customer_row {
    margin-top: 20px;
    background-color: #ff0000;
    /*.el-table{
    	.el-table__header-wrapper{
    		.cell{
    			padding: 0px !important;
    		}
    	}
    }*/ 
  }

  .paging {
    margin-top: 15px;
  }

  .customer_col {
  	cursor: pointer;
    span {
      display: block;
      color: #20a0ff;
      word-break: normal;
      a {
        text-decoration: none;
        color: #20a0ff;
      }
      img {
        margin-right: 5px;
        cursor: pointer
      }
    }
    span.active {
                color: #48576a;
            }
  }

  .exportTag{
    margin-left: 10px;
  }
  tbody {
    font-size: 12px;
  }

  .active {
    display: none;
  }

  .signRow {
    background-color: #00ee00;
  }

  .top_close{
      float: left;
      margin-left: 20px;
      margin-top: 20px;
  }
  .top_close, .top_save{
      margin: 0 20px;
  }
  .top_save {
      float: right;
  }

  .trans_button_col {text-align: center;margin-top: 15px;}
}

</style>